<template>
  <div>


     <div class="app_card mb-2 pt-4 pb-4">
      <div class="d-flex justify-content-end align-items-center">
        <div>
          <el-button type="primary" @click="onAdd()">添加</el-button>
        </div>
      </div>
    </div>


    <div class="app_card pt-4  pb-5">
      <el-table stripe :data="dataOfTable" height="calc(100vh - 300px)" sortable="custom" row-key="title" default-expand-all size="small">
        <el-table-column fixed type="selection" width="50" />
        <!-- <el-table-column fixed type="index" label="#" width="50"></el-table-column> -->
        <el-table-column prop="id" label="ID" width="100" />
        <el-table-column prop="title" label="名称" width="200" />
        <el-table-column prop="path" label="路径" sortable/>

        <!-- <el-table-column prop="path" label="控制器名称" width="150" />
        <el-table-column prop="action" label="操作名称" width="150" /> -->
        <el-table-column prop="Rtype" label="类型"  />
        <el-table-column prop="FileName" label="文件名"  />
        <!-- <el-table-column prop="icon" label="菜单图标" width="100">
                    <template #default="{ row }">
                        <el-image preview-teleported="true" loading="lazy" :src="row.icon" fit="fill" />
                    </template>
                </el-table-column> -->
        <el-table-column prop="Seq" label="排序" sortable>

        </el-table-column>
        <!-- <el-table-column prop="status_text" label="状态" width="150" />
        <el-table-column prop="created_at" label="创建时间" width="150" />
        <el-table-column prop="updated_at" label="更新时间" width="150" /> -->
        <el-table-column fixed="right" label="操作" width="100">
          <template #default="scope">
            <el-button link type="primary" @click="onEditRow(scope.row)">编辑</el-button>
            <el-button link type="primary" @click="onEditRow(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <edit-dialog ref="editDialogRef" @success="loadData()"></edit-dialog>
  </div>
</template>

<script setup>
/**
* 菜单管理列表组件
*/
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import EsAjax from '@/utils/EsAjax';
import ApiUrls from '@/apis/index';
import EditDialog from './EditDialog.vue';
import useAuthStore from '@/stores/useAuthStore';

console.log("[INFO] 创建菜单管理列表组件");
// ======================================================
//                      变量声明
// ======================================================

const authStore = useAuthStore();
// 组件引用
const editDialogRef = ref(null);
// 表格数据
const dataOfTable = ref([]);
// 表格查询参数
const queryParam = ref({
  q: "",
  search: "",
  orderby: "",
  page: 1,
  pageSize: 10,
})

// ======================================================
//                      点击操作
// ======================================================

// 点击刷新按钮
const onRefresh = () => {
  queryParam.value.page = 1;
  loadData();
}

// 点击新增按钮
const onAdd = () => {
  editDialogRef.value.show(0, "添加");
}

// 点击快速搜索按钮
const onSearch = (param) => {
  loadData();
}

// 点击行内编辑按钮
const onEditRow = (row) => {
  editDialogRef.value.show(row.id, "编辑 ", row);
}

// ======================================================
//                      处理事件
// ======================================================

const loadData = () => {
  let params = Object.assign({}, queryParam.value);
  console.log("发送搜索请求", params);
  EsAjax.post(ApiUrls.resourceTreegrid, { params }).then(res => {
    if (res.data.code !== 200) {
      ElMessage.warning(res.data.msg);
      return;
    }
    dataOfTable.value = res.data.data;
  }).catch(err => {
    ElMessage.error(err.message);
  })
}

loadData();
</script>
